<template>
  <div class="bigbox">
    <van-nav-bar title="我的" @click-left="$router.push('/home')">
      <template #left>
        <van-icon name="arrow-left" size="20" color="black" />
        返回
      </template>
    </van-nav-bar>

    <div class="picture">
      <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
      <div class="van-ellipsis">
        <span>{{ text }}</span>
      </div>
    </div>

    <div class="main">
      <ul class="nav">
        <li>商品收藏</li>
        <li>店铺收藏</li>
        <li>我的足迹</li>
      </ul>

      <div class="one">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-icon name="paid" size="40" />
            <p>待付款</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="logistics" size="40" color="#ee0a24" />
            <p>待收货</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="cash-back-record" size="40" />
            <p>退款/售后</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon
              name="completed"
              size="40"
              color="#ee0a24"
              @click="$router.push('/AllOrder')"
            />
            <p>全部订单</p>
          </van-grid-item>
        </van-grid>
      </div>

      <div class="two" v-if="flag">
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <van-icon name="coupon-o" size="35" />
            <p>优惠券</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="guide-o" size="35" color="#ee0a24" />
            <p>默认地址</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="smile-o" size="35" />
            <p>嗨豆</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="balance-o" size="35" color="#ee0a24" />
            <p>红包</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="pending-payment" size="35" color="#ee0a24" />
            <p>全部资产</p>
          </van-grid-item>
        </van-grid>
      </div>

      <div class="three">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-icon name="chat-o" size="40" />
            <p>客户服务</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="todo-list-o" size="40" color="#ee0a24" />
            <p>我的预约</p>
          </van-grid-item>
          <van-grid-item>
            <van-icon name="balance-pay" size="40" />
            <p>闲置换钱</p>
          </van-grid-item>
          <van-grid-item @click="relogin">
            <van-icon name="replay" size="40" color="#ee0a24" />
            <p>重新登录</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
import { Info } from "../api/mine";
export default {
  data() {
    return {
      info: [],
      text: "",
      flag: true,
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      this.flag = true;
    } else {
      this.flag = false;
      this.text = "请先登录";
      setTimeout(() => {
        this.$router.push("/login");
      }, 500);
    }
    Info({
      token: localStorage.getItem("token"),
      userid: localStorage.getItem("userid"),
    }).then((data) => {
      console.log(data.data.data);
      this.info = data.data.data;
      this.text = data.data.data[0].userid;
    });
  },
  name: "Mine",
  components: {},
  methods: {
    relogin() {
      localStorage.removeItem("token");
      this.text = "请先登录";
      setTimeout(() => {
        this.$router.push("/login");
      }, 500);
    },
  },
};
</script>

<style scoped>
.main {
  margin-top: 10px;
  background-color: #f8f8f8;
  font-size: 12px;
}
.picture {
  padding-left: 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.picture span {
  margin-left: 10px;
  font-size: 26px;
}
.picture img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-top: 10px;
}
.nav {
  height: 0.4rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.two {
  margin: 10px 0;
}
</style>